
import React from 'react'
import { connect } from 'react-redux'
import { deleteTaskAction, toggleOneAction, allSelectAction, handleDoubleAction, EditEtileAction } from './Store/actions'

class List extends React.Component {

  state = {
    isAll: false
  }

  handleDelete = (id) => {
    // 控制删除操作
    this.props.deleteTask(id)
  }

  handleCheck = (id) => {
    // 控制单选
    this.props.toggleItem(id)
  }

  toggleAll = () => {
    // 顶部全选按钮
    this.setState({
      isAll: !this.state.isAll
    }, () => {
      // 控制所有的列表的选中状态
      this.props.toggleAll(this.state.isAll)
    })
  }

  handleDoubleClick = (id, e) => {
    // 双击之后进入编辑状态
    // 获取label元素的父元素的下一个兄弟元素 input
    let input = e.target.parentNode.nextSibling
    // 调用父组件函数修改任务编辑状态
    this.props.showEditInput(id)
    setTimeout(() => {
      // 页面已经显示input元素之后才控制获取焦点
      input && input.focus()
    }, 0)
  }

  handleEditEtile = (id, e) => {
    // 控制数组中对应标题的变化
    this.props.editTask(id, e.target.value)
  }

  render() {
    let { todos, isAll, deleteTask, handleCheck, toggleAll, handleDoubleClick, handleEditEtile } = this.props
    // let { isAll } = this.state

    let todoTags = todos.map(item => (
      <li key={item.id} className={[item.done ? 'completed' : '', item.isEdit ? 'editing' : ''].join(' ')}>
        <div data-id={item.id} className="view" onDoubleClick={handleDoubleClick}>
          <input data-id={item.id} checked={item.done} onChange={() => handleCheck(item.id)} className="toggle" type="checkbox" />
          <label>{item.etitle}</label>
          <button className="destroy" onClick={deleteTask.bind(this, item.id)}></button>
        </div>
        <input data-id={item.id} value={item.etitle} onChange={handleEditEtile} onBlur={handleDoubleClick} className="edit" />
      </li>
    ))
    return (
      <section className="main">
        <input defaultChecked={isAll} id="toggle-all" className="toggle-all" type="checkbox" />
        <label onClick={() => toggleAll(isAll)} htmlFor="toggle-all">全部标记为完成</label>
        <ul className="todo-list">
          {todoTags}
        </ul>
      </section>
    )
  }
}

function filterList(state) {
  return state.todos.filter(item => {
    if (state.currentType === 'all') {
      // 全部列表
      return true
    } else if (state.currentType === 'will' && !item.done) {
      // 未完成
      return true
    } else if (state.currentType === 'done' && item.done) {
      return true
    } else {
      return false
    }
  })
}

const mapStateToProps = (state) => {
  let isAll = state.todos.every(item => {
    return item.done
  })
  let todos = filterList(state)
  return {
    // 从唯一的数据源当中获取状态数据
    todos: todos,
    isAll
  }
}

function mapDispatchToProps(dispatch) {
  // 删除任务
  const deleteTask = (id) => {
    // 1. 创建 action
    let action = deleteTaskAction(id)
    // 2. 使用dispatch 分发
    dispatch(action)
  }

  // 单个切换任务
  const handleCheck = (id) => {
    let action = toggleOneAction(id)
    dispatch(action)
  }

  // 全选任务
  const toggleAll = (isAll) => {
    let action = allSelectAction(isAll)
    dispatch(action)
  }

  // 双击之后进入编辑状态
  const handleDoubleClick = (e) => {
    let id = null
    if (e.target.tagName === 'INPUT') {
      id = e.target.dataset.id
    } else {
      id = e.currentTarget.dataset.id
    }
    let action = handleDoubleAction(id)
    dispatch(action)
    // 获取label元素的父元素的下一个兄弟元素 input
    let input = e.target.parentNode.nextSibling
    setTimeout(() => {
      // 页面已经显示input元素之后才控制获取焦点
      input && input.focus()
    }, 0)
  }

  // 编辑功能
  const handleEditEtile = (e) => {
    let id = e.target.dataset.id
    let value = e.target.value
    let action = EditEtileAction(id, value)
    dispatch(action)
  }

  return {
    deleteTask,
    handleCheck,
    toggleAll,
    handleDoubleClick,
    handleEditEtile
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(List)
